import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:provider/provider.dart';

import '../../../lib_baseview/widget/textfield/jr_edit_text.dart';
import '../../../lib_baseview/widget/textfield/jr_text_field.dart';
import '../../../resource/language/generated/l10n.dart';
import '../../m_chatroom.dart';
import 'room_create_page_model.dart';

class RoomCreatePage extends StatelessWidget {
  static showWithBottomSheet(BuildContext context) async {
    await showModalBottomSheet(
        isScrollControlled: true,
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadiusDirectional.only(
            topStart: Radius.circular(16),
            topEnd: Radius.circular(16),
          ),
        ),
        context: context,
        builder: (BuildContext context) {
          //构建弹框中的内容
          return RoomCreatePage();
        });
  }

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => RoomCreatePageModel()),
      ],
      child: Consumer<RoomCreatePageModel>(
          builder: (BuildContext context, RoomCreatePageModel model, child) {
        return AnimatedPadding(
            padding: MediaQuery.of(context).viewInsets,
            duration: const Duration(milliseconds: 100),
            child: SingleChildScrollView(
              child: Container(
                  decoration: const BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadiusDirectional.only(
                      topStart: Radius.circular(16),
                      topEnd: Radius.circular(16),
                    ),
                  ),
                  padding: const EdgeInsets.only(
                      top: 20, bottom: 20, left: 24, right: 24),
                  child: Column(
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          T.current!.create_my_room,
                          style: const TextStyle(
                            fontSize: 14,
                            fontWeight: FontWeight.w700,
                            color: Color(0xff333333),
                          ),
                        ),
                        Container(
                          margin: const EdgeInsets.only(top: 20),
                          child: JRTextField(
                            title: T.current!.name,
                            hintText: T.current!.room_name,
                            onChanged: (String value) {
                              // model.channel.title = value;
                            },
                          ),
                        ),
                        Container(
                          margin: const EdgeInsets.only(top: 20),
                          child: JRTextField(
                            title: T.current!.topic,
                            hintText: T.current!.room_def_desc,
                            onChanged: (String value) {
                              // model.channel.theme = value;
                            },
                          ),
                        ),
                        Container(
                          margin: const EdgeInsets.only(top: 20),
                          width: double.infinity,
                          child: Text(
                            T.current!.select_channel_tag,
                            style: const TextStyle(
                              fontSize: 14,
                              fontWeight: FontWeight.w700,
                              color: Color(0xff333333),
                            ),
                          ),
                        ),
                        const SizedBox(
                          height: 10,
                        ),
                        GridView.count(
                          shrinkWrap: true,
                          mainAxisSpacing: 10,
                          crossAxisSpacing: 10,
                          crossAxisCount: 2,
                          childAspectRatio: 160 / 60,
                          children: [
                            Container(
                              color: Colors.red,
                              width: 20,
                              height: 20,
                            ),
                            Container(
                              color: Colors.green,
                              width: 20,
                              height: 20,
                            ),

                            // getTagItem(model, ChannelLabel.MAKE_FRIENDS_LABEL),
                            // getTagItem(model, ChannelLabel.ORDER_SING_LABEL)
                          ],
                        ),
                        SizedBox(
                          height: 16.h,
                        ),
                        Text(
                          T.current!.public_room,
                          style: const TextStyle(
                            fontSize: 14,
                            fontWeight: FontWeight.w700,
                            color: Color(0xff333333),
                          ),
                        ),
                        Row(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Flexible(
                              child: Text(
                                T.current!.room_private_switch_tips,
                                style: TextStyle(
                                  fontSize: 11.sp,
                                  fontWeight: FontWeight.w400,
                                  color: const Color(0xff666666),
                                ),
                              ),
                            ),
                            // JRSwitchWidget(
                            //   value: !model.channel.isPrivacy,
                            //   valueChanged: (value) {
                            //     model.changePrivacy(!value);
                            //   },
                            // ),
                          ],
                        ),
                        SizedBox(
                          height: 18.h,
                        ),
                        JRButton(
                          onPressed: () {
                            model.onConfirm(context);
                          },
                          padding: EdgeInsets.zero,
                          title: T.current!.create_now,
                        ),
                        SizedBox(
                          height: 18.h,
                        ),
                      ])),
            ));
      }),
    );
  }

  // Widget getTagItem(RoomCreatePageModel model, ChannelLabel channelLabel) {
  //   String url = "";
  //   String text = '';
  //   bool selected = channelLabel == model.channelLabel;
  //   if (channelLabel == ChannelLabel.MAKE_FRIENDS_LABEL) {
  //     url = "assets/images/card_tag_friend.webp";
  //     text = T.current!.chat;
  //   } else if (channelLabel == ChannelLabel.ORDER_SING_LABEL) {
  //     url = "assets/images/card_tag_sing.webp";
  //     text = T.current!.music;
  //   }
  //   return CupertinoButton(
  //     onPressed: () {
  //       model.clickChannelLabel(channelLabel);
  //     },
  //     minSize: 0,
  //     pressedOpacity: 1,
  //     padding: EdgeInsets.zero,
  //     child: Container(
  //       decoration: BoxDecoration(
  //           borderRadius: BorderRadius.circular(8),
  //           image: DecorationImage(
  //               image: AssetImage(
  //                 url,
  //               ),
  //               fit: BoxFit.cover)),
  //       width: 160,
  //       height: 60,
  //       padding: const EdgeInsetsDirectional.only(start: 10, top: 13),
  //       alignment: AlignmentDirectional.topStart,
  //       child: Row(
  //         children: [
  //           JR.img(
  //               selected
  //                   ? 'ic_circle_white_select.webp'
  //                   : 'ic_circle_white_unselect.webp',
  //               width: 16,
  //               height: 16),
  //           const SizedBox(width: 6),
  //           Text(text, style: JRTextStyles.styleFont18W700)
  //         ],
  //       ),
  //     ),
  //   );
  // }
}
